<template>
    <div class="message">
        <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
            <el-table v-loading.body="!loading" :header-row-style="{ height: '70px' }" :header-cell-style="{
                backgroundColor: '#dfe6ec',
            }" :data="msgList" border fit highlight-current-row style="width: 100%" tooltip-effect="dark">
                <el-table-column label="序号" width="50px" align="center" type="index" show-overflow-tooltip />
                <el-table-column prop="sender_head" label="发送者头像" min-width="100px" align="center">
                    <template slot-scope="{ row }">
                        <div style="display: flex; justify-content: center">
                            <HzImg :src="row.sender_head" cssStyle="height: 80px;width: 80px" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="发送者昵称" min-width="130px" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.sender_name }}</template>
                </el-table-column>
                <el-table-column prop="receiver_head" label="接收者头像" min-width="100px" align="center">
                    <template slot-scope="{ row }">
                        <div style="display: flex; justify-content: center">
                            <HzImg :src="row.receiver_head" cssStyle="height: 80px;width: 80px" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="接收者昵称" min-width="130px" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.receiver_name }}</template>
                </el-table-column>

                <el-table-column label="消息时间" prop="ctime" align="center" width="140px" show-overflow-tooltip />

                <el-table-column label="最新消息内容" prop="content" align="center" show-overflow-tooltip />

                <el-table-column label="操作" align="center" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="handleNews(scope.row)">消息</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-show="loading" class="pagination-container">
                <el-pagination :current-page.sync="listQuery.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="9"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>
        <el-dialog title="消息列表" :visible.sync="dialogVisibleMsg" width="800px">
            <el-table v-loading.body="!loading" :header-row-style="{ height: '70px' }" :data="messageList"
                highlight-current-row style="width: 100%" tooltip-effect="dark">
                <el-table-column label="序号" width="50px" align="center" type="index" show-overflow-tooltip />
                <el-table-column prop="sender_headimgurl" label="发送者头像" min-width="100px" align="center">
                    <template slot-scope="{ row }">
                        <div style="display: flex; justify-content: center">
                            <HzImg :src="row.sender_headimgurl" cssStyle="height: 80px;width: 80px" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="发送者昵称" min-width="130px" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.sender_name }}</template>
                </el-table-column>
                <el-table-column prop="receiver_headimgurl" label="接收者头像" min-width="100px" align="center">
                    <template slot-scope="{ row }">
                        <div style="display: flex; justify-content: center">
                            <HzImg :src="row.receiver_headimgurl" cssStyle="height: 80px;width: 80px" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="接收者昵称" min-width="130px" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.receiver_name }}</template>
                </el-table-column>
                <el-table-column label="消息类型" min-width="110px" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.type == 1 ? "文字" : "图片" }}</template>
                </el-table-column>

                <el-table-column label="发送时间" prop="send_time" align="center" width="140px" show-overflow-tooltip />

                <el-table-column label="最新消息内容" prop="content" align="center" show-overflow-tooltip />
            </el-table>
            <div v-show="loading" class="pagination-container">
                <el-pagination :current-page.sync="query.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="9"
                    layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="onSizeChange"
                    @current-change="onCurrentChange" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getMsgList,getMessageList } from '@/api/system/message'
export default {
    data() {
        return {
            msgList: [],
            messageList:[],
            loading: false,
            extra: {}, //额外参数(用于格式化)
            total:0,
            total1:0,
            listQuery: {
                pageNo: 1,
                pageSize: 10,
            },
            dialogVisibleMsg: false,
            chatList: [],//消息列表
            query: {
                chatid:"",
                pageNo: 1,
                pageSize: 10,
            }
        }
       
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = false;
            getMsgList(this.listQuery).then((response) => {
                this.msgList = response.data.records;
                this.extra = response.extra;
                this.total = response.data.total;
                this.loading = true;
            });
        },
        handleMsg() {
            this.loading = false;
            getMessageList(this.query).then((response) => {
                this.messageList = response.data.records;
                this.total1 = response.data.total;
                this.loading = true;
            });
        },
        handleNews(row){
            this.query.chatid = row.chatid;
            this.handleMsg();
            this.dialogVisibleMsg = true;
        },
        handleSizeChange(val) {
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNo = val;
            this.getList();
        },
        onSizeChange(val) {
            this.query.pageSize = val;
            this.handleMag();
        },
        handleCurrentChange(val) {
            this.query.pageNo = val;
            this.handleMag();
        },
    }
}
</script>
<style lang="scss" scoped></style>